<template>
  <div class="centerIntroduce">
    <Header></Header>

    <CarouselFigure></CarouselFigure>

    <div class="centerOverview">
      <!-- 三条线 -->
      <div class="line">
        <div class="firstLine"></div>
        <div class="secondLine"></div>
        <div class="thirdLine"></div>
      </div>
      <el-row>
        <el-col :lg="2" :md="2" :sm="2" :xs="4"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="10" :md="10" :sm="10" :xs="16">
          <span class="sectionTitle">SAP(四川)产业赋能中心-{{ centerBaseInfo.title }}</span>
        </el-col>
        <el-col :lg="12" :md="12" :sm="12" :xs="4"
          ><div style="opacity:0">1</div></el-col
        >
      </el-row>
      <el-row class="overviewBox">
        <el-col :lg="2" :md="2" :sm="2" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="7" :md="7" :sm="7" :xs="0" class="overviewContent">
          <p v-for="(item, index) in centerBaseInfo.content" :key="index" v-html="item">
          </p>
          <span class="more-text-introduce" @click="showMoreText">更多</span>
        </el-col>
        <el-col :lg="1" :md="1" :sm="1" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col
          :lg="11"
          :md="11"
          :sm="11"
          :xs="22"
          :push="1"
          class="overviewVideo"
        >
          <video
            id="iku7opzcmtetpe0"
            playsinline=""
            controls=""
            disablepictureinpicture=""
            controlslist="nodownload"
            width="100%"
            height="100%"
            object-fit:fill
            :src="centerBaseInfo.videoLink"
          >
            <source :src="centerBaseInfo.videoLink" />
            Video element is not supported in this browser.
          </video>
        </el-col>

        <el-col :lg="0" :md="0" :sm="0" :xs="24" class="overviewContent">
          <p v-for="(item, index) in centerBaseInfo.content" :key="index" v-html="item" :class="{ 'isShow': isShow }"></p>
          <span class="more-text-introduce" @click="showMoreText" v-if="!isShow">更多</span>
          <span class="more-text-introduce" @click="showMoreText" v-else>收起</span>
        </el-col>

        <el-col :lg="2" :md="2" :sm="2" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
      </el-row>
    </div>
    <!-- 中心概况 -->

    <!-- SAP智慧企业愿景视频 -->
    <el-row>
      <el-col :span="2"><div style="opacity:0">11</div></el-col>
      <el-col :span="20" class="detailVideoAll">
        <DetailVideoItem
          v-for="(item, index) in allVideoList"
          :key="index"
          class="detailVideoItem"
          :videoItem="item"
        >
        </DetailVideoItem>
      </el-col>
      <el-col><div style="opacity:0">11</div></el-col>
    </el-row>

    <Footer></Footer>
  </div>
</template>

<script>
// 组件
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import CarouselFigure from "@/components/CarouselFigure.vue";
import LeaderCareItem from "@/components/centerHome/LeaderCareItem.vue";
import ExpertInfoItem from "@/components/centerHome/ExpertInfoItem.vue";
import DetailVideoItem from "@/components/centerHome/DetailVideoItem.vue";

// 请求
import { ReqVideoList, ReqCenterIntro } from "../../request/index";
export default {
  data() {
    return {
      allVideoList: [],
      centerBaseInfo: {},
      isShow:false
    };
  },
  components: {
    Header,
    Footer,
    CarouselFigure,
    LeaderCareItem,
    ExpertInfoItem,
    DetailVideoItem,
  },
  methods: {
    // 获取全部的视频信息
    async getAllVideo() {
      let videoList = await ReqVideoList();
      this.allVideoList = videoList.page.list;
    },
    // 获取中心的信息
    async getCenterInfo() {
      let resInfo = await ReqCenterIntro(1);
      this.centerBaseInfo = resInfo.page[0];
      let resPara = this.centerBaseInfo.content.split("\n");
      let newParaList = [];
      resPara.forEach((item) => {
        if (item.length !== 0) {
          newParaList.push(item);
        }
      });
      this.centerBaseInfo.content = newParaList;
      console.log(this.centerBaseInfo)
    },
    // 展示更多
    showMoreText() {
      this.isShow = !this.isShow
    }
  },
  async created() {
    await this.getAllVideo();
    await this.getCenterInfo();
  },
};
</script>

<style scoped>
@import url("~assets/styles/centerHome/centerIntroduce.css");
@import url("../../assets/styles/centerHome/centerDetail.css");
.more-text-introduce {
  display: none;
}
@media screen and (max-width: 768px) {
  .more-text-introduce {
    padding: 10px 20px 0px 20px;
    color: rgb(27, 147, 196);
    text-decoration: none;
    font-weight: 600;
    display: block;
  }

  .detailVideoAll .detailVideoItem {
    width: 100%;
  }
}
.isShow {
  display: block !important;
}
</style>
